<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<dom-module id="shop-cart-item">

    <template strip-whitespace>

    <style include="shop-select">

      :host {
        @apply --layout-horizontal;
        position: relative;
        margin-bottom: 24px;
      }

      shop-image {
        width: 72px;
        height: 72px;
      }

      shop-select > select {
        font-size: 16px;
        padding-left: 40px;
      }

      shop-select > shop-md-decorator {
        font-size: 12px;
        border: none;
      }

      .name {
        @apply --layout-flex-auto;
        line-height: 20px;
        font-weight: 500;
        float: left;
        width: calc(100% - 438px);
        margin-top: 26px;
        margin-right: 30px;
      }

      .name a {
        display: inline-block;
        max-width: 100%;
        text-decoration: none;
        color: var(--app-primary-color);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .price, .size {
        display: inline-block;
        white-space: nowrap;
        color: var(--app-secondary-color);
      }

      .size {
        min-width: 70px;
        width: 144px;
      }

      .size > span {
        margin-left: 10px;
      }

      .price {
        min-width: 70px;
        width: 100px;
      }

      .quantity {
        min-width: 80px;
        width: 160px;
      }

      .delete-button {
        width: 34px;
        height: 34px;
        color: var(--app-secondary-color);
        position: absolute;
        top: 18px;
        right: 0;
      }

      .flex {
        @apply --layout-horizontal;
        @apply --layout-flex-auto;
        margin-left: 24px;
      }

      .detail {
        @apply --layout-horizontal;
        @apply --layout-center;
        margin-top: 26px;
        margin-right: 30px;
        height: 20px;
      }

      @media (max-width: 767px) {
        .flex {
          @apply --layout-vertical;
          margin-left: 10px;
        }

        .name {
          margin-top: 16px;
          margin-right: 0;
          width: calc(100% - 40px);
        }

        .detail {
          @apply --layout-self-end;
          margin: 10px 10px 0 0;
        }

        .quantity, .size, .price {
          text-align: right;
          width: auto;
        }

        .delete-button {
          top: 8px;
        }
      }

      @media (max-width: 360px) {
        .name {
          margin-top: 0;
        }

        .detail {
          @apply --layout-vertical;
          @apply --layout-start;
          @apply --layout-self-start;
          height: auto;
          margin-top: 0;
        }

        .delete-button {
          top: -6px;
        }

        shop-select > select {
          padding: 2px 24px 2px 40px;
        }

        .quantity, .size, .price {
          text-align: left;
          width: auto;
        }
      }

    </style>

    <a href$="{{rootPath}}product-detail/[[entry.item.name]]" title$="[[entry.item.title]]">
      <shop-image src="[[entry.item.image]]" alt="[[entry.item.title]]"></shop-image>
    </a>
    <div class="flex">
      <div class="name">
        <a href$="{{rootPath}}product-detail/[[entry.item.name]]">[[entry.item.title]]</a>
      </div>
      <div class="detail">
        <div class="quantity">
          <shop-select>
            <label prefix>数量:</label>
            <select id="quantitySelect" aria-label="Change quantity" value="[[entry.quantity]]"
                on-change="_quantityChange">
                <template is="dom-repeat" items="[[entry.quantityList]]" as="quantity">
                    <template is="dom-if" if="[[_checkSelected(entry.quantity,quantity)]]">
                        <option value="[[quantity]]" selected>[[quantity]]</option>
                    </template>
                    <template is="dom-if" if="[[!_checkSelected(entry.quantity,quantity)]]">
                        <option value="[[quantity]]">[[quantity]]</option>
                    </template>
                </template>
            </select>
            <shop-md-decorator aria-hidden="true"></shop-md-decorator>
          </shop-select>
        </div>
        <div class="size"><span>[[_skuDisplay(entry.sku)]]</span></div>
        <div class="price">[[_formatPrice(entry.item.price)]]</div>

        <!--
          Use on-click instead of on-tap to prevent the next cart item to be focused
        -->
        <paper-icon-button class="delete-button" icon="close" aria-label$="Delete item [[entry.item.title]]"
            on-click="_removeItem"></paper-icon-button>
      </div>
    </div>
  </template>

    <script>
        class ShopCartItem extends Polymer.Element {

            static get is() {
                return 'shop-cart-item';
            }

            static get properties() {
                return {

                    entry: Object

                }
            }
            _checkSelected(q1,q2){
                return q1==q2;
            }
            _quantityChange() {
                this._setCartItem(parseInt(this.$.quantitySelect.value, 10));
            }

            _setCartItem(quantity) {
                this.dispatchEvent(new CustomEvent('set-cart-item', {
                    bubbles: true,
                    composed: true,
                    detail: {
                        item: this.entry.item,
                        quantity: quantity,
                        sku:this.entry.sku,
                        quantityList:this.entry.quantityList
                    }
                }));
            }

            _formatPrice(price) {
                return price ? '￥' + price.toFixed(2) : '';
            }

            _removeItem() {
                this._setCartItem(0);
            }
            _skuDisplay(sku){
                let arr = new Array();
                for(let n in sku){
                    if(n!="id"){
                       arr.push(sku[n]);
                    }
                }
                return arr.join("/");
            }
        }

        customElements.define(ShopCartItem.is, ShopCartItem);

    </script>

</dom-module>
